<template>
    <div class="add-page">
        <div class="page-card">
            <div class="page-title">基本信息</div>

            <!-- 新增信息表 -->
            <uni-forms
                ref="form"
                v-model="addForm"
                :rules="formRules"
                label-position="top"
                :label-width="100"
            >
                <uni-forms-item label="产品代码" name="productCode">
                    <div @click="openPopup" class="form-text">
                        <span v-if="selected.articleCode">015{{ selected.articleCode }}</span>
                        <span v-else class="text-grayText text-xs">请选择产品代码</span>
                    </div>
                </uni-forms-item>

                <uni-forms-item label="产品类型" name="productType">
                    <div class="form-text">
                        <span v-if="selected.artTireTypeDesc">{{ selected.artTireTypeDesc }}</span>
                        <span v-else class="text-grayText text-xs">选择产品代码后自动获得</span>
                    </div>
                </uni-forms-item>

                <uni-forms-item label="入库数量" name="tiresNum">
                    <uni-easyinput
                        type="number"
                        v-model="addForm.tiresNum"
                        :inputBorder="false"
                        placeholder="请输入入库数量"
                    />
                </uni-forms-item>

                <uni-forms-item label="备注" name="remark">
                    <uni-easyinput v-model="addForm.remark" :inputBorder="false" placeholder="请填写备注" />
                </uni-forms-item>

                <uni-forms-item label="入库员工" name="name">
                    <div class="form-text">{{ userInfo.userName }}</div>
                </uni-forms-item>
            </uni-forms>
        </div>

        <div class="btn-box">
            <div class="submit-btn" @click="doSubmit">提 交</div>
        </div>

        <uni-popup ref="popup" type="bottom">
            <div class="popup-box">
                <uni-search-bar
                    @input="searchCode"
                    @focus="tooglePrefix"
                    @clear="tooglePrefix"
                    v-model="searchValue"
                    placeholder="请输入搜索内容"
                    cancelButton="none"
                >
                    <template v-slot:searchIcon>
                        <uni-icons color="#999999" size="18" type="search" />
                        <span v-if="showPrefix || searchValue" class="ml-2">015</span>
                    </template>
                </uni-search-bar>
                <scroll-view class="code-scroll" scroll-y @scrolltolower="reachScrollBottom">
                    <radio-group @change="checkBoxChange">
                        <label class="code-item" v-for="(item, index) in codeList" :key="index">
                            <radio :value="item.id" color="#FF9D14" :checked="item.id === selected.id" />
                            <div class="code-content">015{{ item.articleCode }}</div>
                        </label>
                    </radio-group>
                </scroll-view>
            </div>
        </uni-popup>
    </div>
</template>

<script lang="ts" setup>
    import { add, procuctionList } from '@/api/pda'
    import { userStore } from '@/store/modules/user'
    import { goBack } from '@/utils/publicFuc'

    const { userInfo } = userStore()
    const addForm = ref<AnyObject>({})

    const formRules = {
        productCode: {
            rules: [
                {
                    required: true,
                    errorMessage: '请选择产品代码',
                },
            ],
        },
        productType: {
            rules: [
                {
                    required: true,
                    errorMessage: '请先选择产品代码',
                },
            ],
        },

        tiresNum: {
            rules: [
                {
                    required: true,
                    errorMessage: '请填写入库数量',
                },
            ],
        },
    }

    const form = ref<any>(null)
    const doSubmit = () => {
        form.value.validate().then((result: AnyObject) => {
            // 新增时箱数为0
            const params = { ...result, employeeNum: userInfo.userName, boxesNum: 0 }
            add(params).then(() => {
                uni.showToast({ title: '新增入库单成功', icon: 'success', duration: 3000 })
                setTimeout(() => {
                    goBack()
                }, 3000)
            })
        })
    }

    const popup = ref<any>(null)
    const openPopup = () => {
        showPrefix.value = false
        popup.value.open()
    }

    // code自带015前缀
    const showPrefix = ref(false)
    const tooglePrefix = () => (showPrefix.value = true)

    const codePage = ref(1)
    const searchValue = ref('')
    const codeList = ref<AnyObject[]>([])
    const codeStatus = ref<'more' | 'loading' | 'noMore'>('more')
    const loadCodeList = () => {
        if (codeStatus.value !== 'more') return
        codeStatus.value = 'loading'
        const params = {
            pageNumber: codePage.value,
            pageSize: 15,
            searchKey: searchValue.value,
        }
        procuctionList(params).then((res: any) => {
            const { data, record } = res
            codeList.value.push(...data)
            if (codeList.value.length === record) {
                codeStatus.value = 'noMore'
            } else {
                codeStatus.value = 'more'
                codePage.value++
            }
        })
    }

    // 进入页面时先获取一次
    loadCodeList()

    //防抖处理
    let timer: NodeJS.Timeout | null | undefined = null
    const searchCode = () => {
        if (timer) clearTimeout(timer)
        timer = setTimeout(() => {
            codeStatus.value = 'more'
            codeList.value = []
            codePage.value = 1
            loadCodeList()
        }, 500)
    }

    const reachScrollBottom = () => {
        // 触底时加载下一页
        loadCodeList()
    }

    const selected = ref<AnyObject>({})

    const checkBoxChange = (e: any) => {
        const { value } = e.detail
        //@ts-ignore
        selected.value = codeList.value.find(item => item.id === value)
        addForm.value.productCode = selected.value.articleCode
        addForm.value.productType = selected.value.artTireTypeDesc

        popup.value.close()
    }
</script>

<style lang="scss" scoped>
    .add-page {
        @apply min-h-screen bg-pagebg p-4 pb-20 box-border;
        .btn-box {
            @apply fixed w-screen bg-white  py-4 left-0 bottom-0;
            .submit-btn {
                @apply bg-primary text-white text-center text-lg py-2 rounded-lg mx-2;
            }
        }
    }
    // uni-form的样式
    :deep(uni-form) {
        .uni-forms-item {
            &::after {
                content: '';
                @apply h-px bg-line w-full;
            }
            .uni-forms-item__label {
                @apply ml-3;
                .is-required {
                    @apply hidden;
                }
            }
            .input-value-border {
                @apply border-0;
                .uni-select__input-placeholder {
                    @apply text-grayText;
                }
            }

            .uni-forms-item__error {
                @apply ml-3;
            }
        }
    }

    .popup-box {
        height: 80vh;
        @apply bg-white rounded-t-2xl;

        .code-scroll {
            height: calc(100% - 130rpx);
            @apply p-4 box-border pt-0;

            .code-item {
                @apply flex items-center pb-1 pt-4 border-0 border-b border-line border-solid;
                &:first-of-type {
                    @apply pt-0;
                }
                .code-content {
                    @apply flex-1 break-all ml-4;
                }
            }
        }
    }

    .form-text {
        @apply ml-3 pb-2;
    }
</style>
